<template>
  <div class="activities-page">
    <!-- 顶部横幅 -->
    <div class="activities-banner">
      <div class="banner-content">
        <h1>志愿活动</h1>
        <p>加入我们的海洋保护行动，让每一份努力都有意义</p>
        <div class="search-bar">
          <el-input
            v-model="searchQuery"
            placeholder="搜索活动..."
            prefix-icon="Search"
            clearable
          >
            <template #append>
              <el-button type="primary">搜索</el-button>
            </template>
          </el-input>
        </div>
      </div>
    </div>

    <!-- 筛选器区域 -->
    <div class="filter-section">
      <el-row :gutter="20" justify="space-between" align="middle">
        <el-col :span="16">
          <el-radio-group v-model="activeFilter" size="large">
            <el-radio-button label="all">全部活动</el-radio-button>
            <el-radio-button label="upcoming">即将开始</el-radio-button>
            <el-radio-button label="ongoing">正在进行</el-radio-button>
            <el-radio-button label="ended">已结束</el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="8" class="text-right">
          <el-select v-model="sortBy" placeholder="排序方式" size="large">
            <el-option label="最新发布" value="latest" />
            <el-option label="参与人数" value="participants" />
            <el-option label="活动日期" value="date" />
          </el-select>
        </el-col>
      </el-row>
    </div>

    <!-- 活动列表区域 -->
    <div class="activities-container">
      <el-row :gutter="30">
        <el-col v-for="activity in filteredActivities" 
                :key="activity.id" 
                :xs="24" 
                :sm="12" 
                :md="8" 
                :lg="8"
                class="activity-col">
          <div class="activity-card" 
               :class="{ 'ended': activity.status === 'ended' }"
               @click="viewActivityDetail(activity.id)">
            <div class="activity-image">
              <el-image :src="activity.image" fit="cover">
                <template #placeholder>
                  <div class="image-placeholder">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <div class="activity-status" :class="activity.status">
                {{ activity.statusText }}
              </div>
              <div class="activity-date">
                <div class="date-day">{{ formatDay(activity.date) }}</div>
                <div class="date-month">{{ formatMonth(activity.date) }}</div>
              </div>
            </div>
            <div class="activity-content">
              <h3 class="activity-title">{{ activity.title }}</h3>
              <p class="activity-desc">{{ activity.description }}</p>
              <div class="activity-info">
                <div class="info-item">
                  <el-icon><Location /></el-icon>
                  <span>{{ activity.location }}</span>
                </div>
                <div class="info-item">
                  <el-icon><User /></el-icon>
                  <span>{{ activity.participants }}人已报名</span>
                </div>
                <div class="info-item">
                  <el-icon><Timer /></el-icon>
                  <span>{{ activity.duration }}</span>
                </div>
              </div>
              <div class="activity-footer">
                <div class="tags">
                  <el-tag 
                    v-for="tag in activity.tags" 
                    :key="tag"
                    size="small"
                    :type="getTagType(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
                <el-button 
                  type="primary" 
                  :disabled="activity.status === 'ended'"
                  @click="handleSignup(activity)"
                  class="signup-btn"
                >
                  {{ getActionButtonText(activity.status) }}
                </el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="totalActivities"
          :page-sizes="[9, 18, 36]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Search, Location, User, Timer, Picture } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

// 状态变量
const searchQuery = ref('')
const activeFilter = ref('all')
const sortBy = ref('latest')
const currentPage = ref(1)
const pageSize = ref(9)

// 模拟活动数据
const activities = ref([
  {
    id: 1,
    title: '海滩清洁日',
    description: '组织志愿者清理海滩垃圾，保护海洋环境。活动提供清洁工具和装备，为海洋生态尽一份力！',
    image: 'https://images.unsplash.com/photo-1621451537084-482c73073a0f?w=800',
    date: '2024-04-15',
    location: '深圳湾海滩',
    status: 'upcoming',
    statusText: '即将开始',
    participants: 128,
    duration: '3小时',
    tags: ['环保行动', '海滩清洁', '团队活动']
  },
  {
    id: 2,
    title: '珊瑚礁保护计划',
    description: '专业团队带领志愿者进行珊瑚礁监测和保护工作，包括水质监测、珊瑚健康评估等科研活动。',
    image: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800',
    date: '2024-04-20',
    location: '三亚亚龙湾',
    status: 'ongoing',
    statusText: '报名中',
    participants: 56,
    duration: '4小时',
    tags: ['海洋保护', '科研活动', '专业指导']
  },
  {
    id: 3,
    title: '海龟救助行动',
    description: '救助受伤的海龟，并进行康复训练和放生活动。志愿者将参与海龟日常护理和环境教育工作。',
    image: 'https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?w=800',
    date: '2024-04-25',
    location: '海南文昌',
    status: 'ongoing',
    statusText: '报名中',
    participants: 42,
    duration: '6小时',
    tags: ['动物保护', '环境教育', '实践活动']
  }
])

// 计算属性
const filteredActivities = computed(() => {
  let result = [...activities.value]
  
  // 搜索过滤
  if (searchQuery.value) {
    result = result.filter(activity => 
      activity.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      activity.description.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  }
  
  // 状态过滤
  if (activeFilter.value !== 'all') {
    result = result.filter(activity => activity.status === activeFilter.value)
  }
  
  // 排序
  switch (sortBy.value) {
    case 'participants':
      result.sort((a, b) => b.participants - a.participants)
      break
    case 'date':
      result.sort((a, b) => new Date(a.date) - new Date(b.date))
      break
    default:
      // 默认按最新排序
      result.sort((a, b) => new Date(b.date) - new Date(a.date))
  }
  
  return result
})

const totalActivities = computed(() => filteredActivities.value.length)

// 方法
const formatDay = (date) => {
  return new Date(date).getDate()
}

const formatMonth = (date) => {
  return new Date(date).toLocaleString('zh-CN', { month: 'short' })
}

const getTagType = (tag) => {
  const tagTypes = {
    '环保行动': 'success',
    '海洋保护': 'primary',
    '科研活动': 'warning',
    '动物保护': 'danger',
    '环境教育': 'info'
  }
  return tagTypes[tag] || ''
}

const getActionButtonText = (status) => {
  switch (status) {
    case 'ended':
      return '已结束'
    case 'ongoing':
      return '立即报名'
    case 'upcoming':
      return '预约报名'
    default:
      return '了解详情'
  }
}

const handleSignup = (activity) => {
  ElMessage.success(`已成功报名：${activity.title}`)
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

const router = useRouter()

// 查看活动详情
const viewActivityDetail = (id) => {
  router.push(`/activities/${id}`)
}
</script>

<style scoped lang="scss">
.activities-page {
  min-height: 100vh;
  background-color: #f5f7fa;

  .activities-banner {
    height: 300px;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
                url('https://images.unsplash.com/photo-1439405326854-014607f694d7?w=1920') center/cover;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 40px;
    border-radius: 8px;


    .banner-content {
      max-width: 800px;
      padding: 0 20px;

      h1 {
        font-size: 3em;
        margin-bottom: 20px;
        font-weight: 600;
      }

      p {
        font-size: 1.2em;
        margin-bottom: 30px;
        opacity: 0.9;
      }

      .search-bar {
        max-width: 600px;
        margin: 0 auto;

        .el-input {
          --el-input-height: 50px;
          font-size: 1.1em;
        }
      }
    }
  }

  .filter-section {
    max-width: 1400px;
    margin: 0 auto 30px;
    padding: 0 20px;

    .text-right {
      text-align: right;
    }
  }

  .activities-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 60px;

    .activity-col {
      margin-bottom: 30px;
    }

    .activity-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.1);
      }

      &.ended {
        opacity: 0.7;
      }

      .activity-image {
        position: relative;
        height: 220px;

        .el-image {
          width: 100%;
          height: 100%;
        }

        .activity-status {
          position: absolute;
          top: 16px;
          right: 16px;
          padding: 6px 12px;
          border-radius: 20px;
          font-size: 13px;
          font-weight: 500;
          color: white;
          backdrop-filter: blur(8px);

          &.ongoing {
            background: rgba(103, 194, 58, 0.9);
          }

          &.upcoming {
            background: rgba(64, 158, 255, 0.9);
          }

          &.ended {
            background: rgba(144, 147, 153, 0.9);
          }
        }

        .activity-date {
          position: absolute;
          left: 16px;
          top: 16px;
          background: white;
          padding: 8px 12px;
          border-radius: 8px;
          text-align: center;
          box-shadow: 0 2px 8px rgba(0,0,0,0.1);

          .date-day {
            font-size: 1.5em;
            font-weight: bold;
            color: #409EFF;
          }

          .date-month {
            font-size: 0.9em;
            color: #606266;
          }
        }
      }

      .activity-content {
        padding: 24px;

        .activity-title {
          font-size: 1.3em;
          font-weight: 600;
          color: #303133;
          margin-bottom: 12px;
          line-height: 1.4;
        }

        .activity-desc {
          color: #606266;
          font-size: 14px;
          line-height: 1.6;
          margin-bottom: 20px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .activity-info {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
          gap: 16px;
          margin-bottom: 20px;
          padding: 16px;
          background: #f5f7fa;
          border-radius: 8px;

          .info-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #606266;
            font-size: 13px;

            .el-icon {
              font-size: 16px;
              color: #409EFF;
            }
          }
        }

        .activity-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
          }

          .signup-btn {
            min-width: 100px;
          }
        }
      }
    }
  }

  .pagination-container {
    margin-top: 40px;
    text-align: center;
  }
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
}

@media (max-width: 768px) {
  .activities-page {
    .activities-banner {
      height: 250px;

      .banner-content {
        h1 {
          font-size: 2em;
        }
      }
    }

    .filter-section {
      .el-radio-group {
        margin-bottom: 20px;
      }

      .text-right {
        text-align: left;
      }
    }
  }
}
</style> 